(function () {
  //获取当前页页码
  var page = 1;
  //是否完成分页查询，0已完成，1未完成
  var finished = 0;
  //是否已经查询完所有的数据
  var sover = 0;
  //如果屏幕未到整屏自动加载下一页补满
  var setdefult=setInterval(function (){
      if(sover==1)
          clearInterval(setdefult);
      else if($('.container').height()<=$(window).height())
          loadmore($(window));
      else
          clearInterval(setdefult);
  },500);


  //加载完
  function loadover() {
    if (sover == 1) {
      var overtext = "Duang～到底了";
      $(".loadmore").remove();
      if ($(".loadover").length > 0) {
        $(".loadover span").eq(0).html(overtext);
      } else {
        var txt = '<div class="loadover"><span>' + overtext + "</span></div>";
        $("body").append(txt);
      }
    }
  }

  //加载更多
  var vid = 0;
  function loadmore(obj) {
    if (finished == 0 && sover == 0) {
        //返回或设置匹配元素的滚动条垂直位置
      var scrollTop = $(obj).scrollTop();
      //文档高度，可以理解为网页的实际高度
        var scrollHeight = $(document).height();
      //当前可见区域高度，由显示器决定
      var windowHeight = $(obj).height();

      if ($(".loadmore").length == 0) {
        var txt =
          '<div class="loadmore"><span class="loading"></span>加载中..</div>';
        $("body").append(txt);
      }

      //滚动条距离顶部距离 + 显示器高度 - 文档高度
      if ( scrollHeight - scrollTop - windowHeight <= 50) {
        //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
        //防止未加载完再次执行
        finished = 1;
        //发起异步请求进行分页查询
        $.ajax({
            type: "GET",
            url: "index?pageIndex=" + page,
            dataType: "json",
            async:false,
            success: function (response) {
                //如果没有任何数据，说明页面
                if (response.data == []) {
                    sover = 1;
                    loadover();
                }else{
                    if (page == 1) {
                        //$("#no_msg").removeClass("hidden");
                        $(".loadover").remove();//移除正在加载的提示信息
                    }
                    var data = response.data;
                    for (var index in data) { //遍历集合

                            var template = `<div class="ui-block">
                            <article class="hentry post">
                                <div class="post__author author vcard inline-items">
                                <img
                                    style="width:40px;height: 40px;"
                                    src="/upload/${data[index]["pic"]}"
                                    alt="author"
                                />
                                <div class="author-date">
                                    <a class="h6 post__author-name fn" href="#"
                                    >${data[index]["nickName"]}</a
                                    >
                                    <div class="post__date">
                                    <time class="published"> ${data[index]["dateDialect"]}</time>
                                    </div>
                                </div>
                                </div>
                                <p>${data[index]["content"]}</p>
                                <div class="post-additional-info inline-items">
                                <div class="comments-shared">
                                    <a href="detail?messageId=${data[index]["id"]}" class="post-add-icon inline-items">
                                        <span class="glyphicon glyphicon-edit"></span>
                                        <span>${data[index]["replys"]}</span>
                                    </a>
                                    <a href="#" class="post-add-icon inline-items">
                                            <span class="glyphicon glyphicon-thumbs-up"></span>
                                            <span>24</span>
                                    </a>
                                </div>
                                </div>
                            </article>
                            </div>`;

                            $('.messages').append(template);
                        }
                        $(".loadmore").remove();
                        finished = 0; //当前已经完成加载
                        //最后一页
                        if (page == response["pages"]) {
                            sover = 1;
                            loadover();
                        }
                        page += 1; //当前页码+1
                    
                }
            },
            error: function (xhr, type) {
                alert("Ajax error!");
            },
            });
        
      }
    }
  }
  //页面滚动执行事件
  $(window).scroll(function () {
    // console.log('触发页面滚动事件scroll');
    // console.log('当前显示器高度：',$(window).height());
    // console.log('当前html文档高度：',$(document).height());
    // console.log('当前滚动条距离顶部的高度：',$(window).scrollTop());

    
    //加载更多数据
    loadmore($(this));
  });
})();
